/**
 * @description: 屏幕尺寸：1080pxpx * 1920px
 * @author: ccarlos
 * @date 2020/5/17 21:05
 */
import { Button } from 'antd';
import AmapMap from './components/amap';
import { useNavigate } from 'react-router-dom';

function VisualTest() {

    const navigate = useNavigate();

    const screenWidth = window.innerWidth;
    const screenHeight = window.innerHeight;

    // 替换为你的高德地图开发者Key（需在高德开放平台申请）
    const AMAP_KEY = '76c16889f1d23d32bc11c6db58e3bf52';

    return (
        <div className="App">
            {/* 基础地图展示 */}
            <div style={{ width: '1920px' }}>
                <AmapMap 
                    mapKey={AMAP_KEY}
                    center={[100.085472, 31.655725]}
                    zoom={7}
                    height="1080px"
                ></AmapMap>
            </div>

            {/* 可视化展示组件 */}
            <div 
                style={{ 
                    zIndex: '99', 
                    width: '1920px',
                    height: '1080px',
                    position: 'absolute', 
                    top: '0', 
                    left: '0',
                    backgroundColor: 'rgba(255, 255, 255, 0)',
                    pointerEvents: 'none'
                }}
            >
                {/* head区域 */}
                <div 
                    style={{
                        backgroundColor: 'rgba(3, 20, 43, .9)',
                        height: '80px',
                        pointerEvents: 'auto',
                        display: 'flex',
                    }}
                >
                    <h1 style={{ color: 'white' }}>标题</h1>
                    <Button 
                        onClick={() => navigate('/admin')}
                        style={{ pointerEvents: 'auto' }}
                    >
                        按钮
                    </Button>

                    <Button 
                        onClick={() => { console.log("屏幕宽度",screenWidth, "屏幕高度", screenHeight) }}
                        style={{ pointerEvents: 'auto' }}
                    >
                        测试
                    </Button>
                </div>

                {/* body区域 */}
                <div
                    style={{ // calc(100% - 64px)
                        width: '1920px',
                        height: '1000px',
                        display: 'grid',
                        gridTemplateColumns: '1fr 2fr 1fr',
                    }}
                >
                    {/* 主体左侧区域 */}
                    <div 
                        style={{ 
                            display: 'grid',
                            gridTemplateRows: '1fr 1fr 1fr',
                            backgroundColor: 'rgba(3, 20, 43, 0.2)',
                            pointerEvents: 'auto',
                        }}
                    >
                        <div
                            style={{ 
                                padding: '8px 0 1px 8px',
                            }}
                        >
                            <div 
                                style={{ 
                                    border: '1px solid #145E79', 
                                    height: '100%',
                                    backgroundColor: 'rgba(3, 20, 43, .9)',
                                }}
                            >
                                项目列表
                            </div>
                        </div>
                        <div
                            style={{ 
                                padding: '8px 0 1px 8px',
                            }}
                        >
                            <div 
                                style={{ 
                                    border: '1px solid #145E79',
                                    height: '100%',
                                    backgroundColor: 'rgba(3, 20, 43, .9)',
                                }}
                            >
                                装备统计
                            </div>
                        </div>
                        <div
                            style={{ 
                                padding: '8px 0 1px 8px',
                            }}
                        >
                            <div 
                                style={{ 
                                    border: '1px solid #145E79',
                                    height: '100%',
                                    backgroundColor: 'rgba(3, 20, 43, .9)',
                                }}
                            >
                                超欠挖统计
                            </div>
                        </div>
                    </div>

                    <div>2</div>

                    {/* 主体右侧区域 */}
                    <div 
                        style={{ 
                            display: 'grid',
                            gridTemplateRows: '1fr 1fr 1fr',
                            backgroundColor: 'rgba(3, 20, 43, 0.2)',
                            pointerEvents: 'auto',
                        }}
                    >
                        <div
                            style={{ 
                                padding: '8px 8px 1px 0',
                            }}
                        >
                            <div 
                                style={{ 
                                    border: '1px solid #145E79', 
                                    height: '100%',
                                    backgroundColor: 'rgba(3, 20, 43, .9)',
                                }}
                            >
                                项目列表
                            </div>
                        </div>
                        <div
                            style={{ 
                                padding: '8px 8px 1px 0',
                            }}
                        >
                            <div 
                                style={{ 
                                    border: '1px solid #145E79',
                                    height: '100%',
                                    backgroundColor: 'rgba(3, 20, 43, .9)',
                                }}
                            >
                                装备统计
                            </div>
                        </div>
                        <div
                            style={{ 
                                padding: '8px 8px 1px 0',
                            }}
                        >
                            <div 
                                style={{ 
                                    border: '1px solid #145E79',
                                    height: '100%',
                                    backgroundColor: 'rgba(3, 20, 43, .9)',
                                }}
                            >
                                超欠挖统计
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default VisualTest;
    